<template>
    <div id="shop">
        <headerNav title="百货上新"></headerNav>
        <!-- 百货 -->
        <div class="head">
             <Banner :swiperList="swiperdata"> </Banner>
        </div>
        <div class="content">
            <div class="contentLeft">
                <div class="transform contentFont">喜小瓶气泡水</div>
                <div class="transform contentBorder contentBorderFont"><span style="margin-left:5px">大瓶更尽兴</span></div>
                <img src="~assets/img/shop/contentleft.png" alt="" />
            </div>
            <div class="contentRight">
                <div class="contentRightHead">
                    <div class="comLeft">
                        <div class="transform contentFont">喜茶实验室</div>
                        <div class="transform contentBorder">
                            <p class="contentBorderFont"><span style="margin-left:14px">薯条杯</span></p>
                        </div>                  
                    </div>
                    <div class="comRight">
                       <img src="~assets/img/shop/fries.png" alt="" />
                    </div>
                </div>
                <div class="contentRightButtom">
                    <div class="comLeft">
                        <div class="transform contentFont">灵感周边</div>
                        <div class="transform contentBorder">
                            <p class="contentBorderFont"><span style="margin-left:10px">国潮周边</span></p>
                        </div>                  
                    </div>
                    <div class="comRight">
                       <img src="~assets/img/shop/juice.png" alt="" />
                    </div>                    
                </div>
            </div>
        </div>
        <div class="buttom">
            <p>百货上新 <span class="contentBorderFont">NEW ARRIVALS</span></p>
            <img src="~assets/img/shop/haibao.png" alt="">
        </div>
        <div class="last">
            <div class="lastLeft">
                <img src="~assets/img/shop/xuegao.png" alt="">
            </div>
            <div  class="ll-lastRight">
                <div class="contentFont" >喜茶冰棒 芒芒甘露...</div>
                <div class="contentBorderFont" style="transform-origin: left top;">受物流影响，物流配送区</div >
                <div style="margin:12px 0;">￥108.00</div>
                <button type="button" class="lastButton" style="border: none">
                    <span style="opacity: 1;font-size: 12px;text-align: center;color: #fff;white-space: nowrap;" @click="$router.push('/food')">立即购买
                    </span>
                </button>
            </div>
        </div>
        <br/>
        <br/>
        <br/>
    </div>
</template>

<script>
import Banner from './childCom/Banner'
  import headerNav from 'components/HeaderNav/headerNav'
import {getHomeData} from 'network/index'
    export default {
        name: "shop",
        components:{
           Banner,
           headerNav
        },
        created(){
            getHomeData().then(res=>{
                console.log(res);
            }).catch(err=>{
                console.log(err);
            })
        },
        data(){
            return{
                //轮播图照片
               swiperdata:[require('assets/img/shop/first.png'),require('assets/img/shop/b1.png'),require('assets/img/shop/b2.png')],
                // contentImg:[require('assets/img/shop/contentleft.png')]
            }
        }
    }
</script>

<style scoped>
    *{
        margin:0;
        padding: 0;
    }
    #shop{
        overflow: hidden;
    }
    .head img{
        margin:0;
        width:100%;
        height:375px;
    }
    .content{
        display: flex;
    }
    .contentLeft img{
        margin: 10px 0;
        width: 100%;
        height: 98px;
        /* background-color: red; */
    }
    .buttom img{
        /* margin: 10px 0px; */
        margin-top: 10px;
        width: 98%;
        height: 151px;
        margin-top: 8px;
        border-radius: 6.5px;
    }
    .content{
        display: flex;
        width: 100%;
        height: 175px;
        justify-content: space-around;
        /* background-color: rgb(245,245,245,1); */
    }
    .buttom{
        margin: 0 12px;
    }
    .last{
        width: 93%;
        height: 170px;
        background: rgb(255, 255, 255);
        border-width: 4px;
        border-color: rgba(255, 255, 128, 0.41);
        border-style: solid;
        margin:0 10px;
        display: flex;
        justify-content: space-around;
    }
    .lastLeft{
        flex: 1;
        padding: 10px;
    }
    .ll-lastRight{
        padding: 10px 10px 10px 0px;
        flex: 1;
    }
    .last img{
        width:100%;
        height:100%;
    }
    .lastBorder{
        width: 343px;
        height: 175px;
        border-width: 4px;
        border-color: rgba(255, 255, 128, 0.41);
        border-style: solid;
    }
    .transform{
        transform: translate(16px, 16px) rotate(0deg);
    }
    .contentLeft{
        flex:2;
        height: 155px;
        margin: 0 10px;
        background-color: #f5f5f5;
        border-radius: 6.5px;
    }
    .contentRight{
        display: flex;
        flex:3;
        height: 155px;
        margin-right: 10px;
        /* background-color: #f5f5f5; */
        flex-direction: column;
        flex-wrap:wrap;
        border-radius: 6.5px;
    }
    .contentRightHead{

        height: 72px;
        /* background-color: black; */
        background-color: #f5f5f5;
        border-radius: 6.5px;
        margin: 0 0 10px 0;
        display: flex;
        justify-content: space-around;
    }
    /* .comLeft{

    } */
    .comRight img{
        width:66px;
        height:71px;
    }
    .contentRightButtom{

        height: 72px;
        background-color: #f5f5f5;
        border-radius: 6.5px;
        
        display: flex;
        justify-content: space-around;
        /* background-color: black; */
    }
    .contentFont{
        font-size: 14px;
        font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
        color: rgb(0, 0, 0);
        white-space: pre-wrap;
        letter-spacing: 0px;
        word-break: break-word;
        line-height: 28px;
        /* transform: scale(0.5); */
        /* transform-origin: left top;
        transition: unset;
        position: absolute;
        width: 168px;
        min-width: 168px; */
        /* text-align: center; */
    }
    .contentBorder{
        width: 70px;
        height: 17px;
        border-width: 1px;
        border-color: rgb(215, 215, 215);
        border-style: solid;
        box-sizing: border-box;
        z-index: auto;
        pointer-events: none;
        overflow: hidden;        
    }
    .contentBorderFont{
        /* width: 90px; */
        /* height: 17px; */
        /* line-height: 24px; */
        opacity: 1;
        font-size: 10px;
        font-family: "Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, sans-serif;
        /* text-align: center; */
        color: rgb(170, 170, 170);
        white-space: nowrap;       
    }
    .lastButton{
        background: rgb(184, 116, 26);
        border-radius: 12px;
        opacity: 1;
        width: 75px;
        height: 24px;
    }
    .lastRight{
        flex-direction: column;
        flex-wrap:wrap;
    }
</style>